// 开发环境优化
// 1.优化打包速度
// 2.优化调式功能
// 3.hrm 热更新

// 生产环境性能优化
// 1.优化打包速度
// 2.代码性能
// 3.

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const commonCssLoader = [
  'style-loader',
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          'postcss-preset-env',
        ],
      },
    },
  },
];

module.exports = {
  entry: ['./src/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js', // 输出的文件名
    path: resolve(__dirname, 'build'), // 输出的路径
  },
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    open: true,
    hot: true, // 开启热更新  css更新要style-loader才行
    // 因为style-loader 内部实现了 这个功能
    // js文件没有 热更新功能
    // if (module.hot) {
    //   // 这样写就是监听printjs文件的变化  一旦发生变化  其他模块不会重新打包构建
    //   // 入口文件没办法热更新
    //   module.hot.accept('./print.js', () => {
    //     print();
    //   });
    // }
    // html没有热更新了  要刷新才行
    //    解决办法是 在entry 添加入口
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader],
      },
      {
        test: /\.less$/,
        use: [
          ...commonCssLoader,
          'less-loader',
        ],
      },
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
          // 自动修复
          fix: true,
        },
        // 先执行eslint
        enforce: 'pre',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', {
            // 按需加载
            useBuiltIns: 'usage',
            // 指定corejs版本
            corejs: {
              version: 3,
            },
            // 兼容性做到那个浏览器
            targets: {
              ie: '9',
            },
          }]],
        },
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 64,
          esModule: false,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
        },
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'font',
        },
      },
      {
        test: /\.html$/,
        // 处理html img图片  负责引入图片
        loader: 'html-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeTagWhitespace: true,
        removeComments: true,
      },
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css',
    }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  mode: 'production',
};
